<style>
  .comments_detail .product {
    height: 180px;
    background: #f6f6f6;
    display: flex;
    margin-bottom: 20px;
  }

  .comments_detail .product-images {
    width: 180px;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .comments_detail .product-images img {
    width: 180px;
    height: 180px;
    object-fit: cover;
  }

  .comments_detail .product-comment {
    padding:0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:hidden;
  }

  .comments_detail .product-comment .product-comment-btn {
    min-height: 24px;
    text-align: center;
    background: #1d1f21;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin-top: 16px;
    display: inline-block;
  }

  .comments_detail .product-comment .product-comment-total {
    font-size: 14px;
    font-weight: 300;
    color: #888888;
    margin-top: 16px;

  }
  .comments_detail .product-comment .comment-product-title{
    font-size: 14px;
    color: var(--title_color);
    text-align: left;
  }

  .comments_detail .product-comment-fraction {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .comments_detail .product-comment-fraction svg {
    margin-right: 4px;
  }

  .comments_detail .product-comment-fraction>svg:last-child {
    margin-right: 0;
  }

  .comments_detail .product-comment-fraction span {
    font-weight: 500;
    color: #1d1f21;
    font-size: 24px;
    line-height: 24px;
    margin-left: 10px;
  }

  .comments_detail .product-proportion {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
    flex-shrink: 0;
  }

  .comments_detail .product-proportion-row {
    display: flex;
    align-items: center;
  }

  .comments_detail .product-proportion-row+.product-proportion-row {
    margin-top: 6px;
  }

  .comments_detail .product-proportion-fraction {
    width: 160px;
    height: 10px;
    background: #dddddd;
    margin: 0 4px;
    position: relative;
  }

  .comments_detail .product-comment-total-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #BBBBBB;
    z-index: 10;
  }

  .comments_detail .product-proportion-number {
    font-weight: 300;
    color: #1d1f21;
    font-size: 14px;
  }

 


  .comments_detail .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .comments_detail .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .comments_detail .comment-star-warp-choose svg {
    flex-shrink: 0;
  }


  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .comments_detail .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding-bottom:30px;
    }

    .comments_detail .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_detail .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_detail .product .product-comment {
      margin-left: 0;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .comments_detail .product .product-proportion {
      margin-left: 0;
      width: 100%;
      align-items: center;
      margin-top: 30px;
      padding: 0;
    }

    .comments_detail .comment_container {
      column-count: 1;
    }

    .comments_detail .product-comment .comment-product-title{
      text-align: center;
    }
  }
  @media screen and (max-width: 767px){
    .comments_detail .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
    }

    .comments_detail .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_detail .product-comment .comment-product-title{
      text-align: center;
    }

    .comments_detail .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_detail .product .product-comment {
      margin-left: 0;
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    .comments_detail .product-comment .product-comment-total{
      margin-top: 10px;
    }

    .comments_detail .product .product-proportion {
      margin-left: 0;
      margin-top: 15px;
      padding: 0 0 15px 0;
    }
    .comments_detail .comments_detail-comment-wrap{
      margin-top: 15px;
    }

    /* .comment-reply-warp{
      padding: 15px 0 0 0 !important;
    } */
    .comments_detail .comment_container {
      column-count: 1;
    }
  }
</style>

<div class="comments_detail container_wrapper" id="comments_detail">
  <h1 class="title">{{lang.comments.title}}</h1>

  <div class="product">
    <a class="product-images" href="/products/detail/{{ product_comment.product.id}}?data_from={{data_from}}">
      <img  data-src="{{ product_comment.product.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{product_comment.product.alt | default : product_comment.product.title}}" />
    </a>
    <div class="product-comment">
      <a class="comment-product-title line-clamp2" href="/products/detail/{{ product_comment.product.id }}?data_from={{data_from}}">{{product_comment.product.title}}</a>
      <div class="product-comment-fraction">
        <div class="comment-star-warp">
          {% for index in (1..5) %}
          {% include icon_block_star ,{width:"24",height:"24",color: "#bbbbbb"} %}
          {% endfor %}
          {% assign star = 0 %}
          {% if  product_comment.product.star %}  {% assign star = product_comment.product.star | divided_by: 5 | times:100 %} {% endif %}
          <div class="comment-star-warp-choose" style="width:{{star}}%">
            {% for index in (1..5) %}
            {% include icon_block_star ,{width:"24",height:"24",color: "#F8AD6B"} %}
            {% endfor %}
          </div>
        </div>
        <span>{{product_comment.product.star}}</span>
      </div>
      {% if storeConfig.customer_comment_status == 1 %}
      <div>
      <a href="javascript:;" class="main_btn product-comment-btn write-comment">
        {{lang.comments_detail.write}}
      </a>
      </div>
      {% endif %}
    </div>
    <div class="product-proportion">
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{% if index <= 5 %} #F8AD6B {% else %} #bbbbbb {% endif %}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
        {% if  product_comment.product.star_list.fifth %}
          <div class="product-comment-total-progress" style="width:{{ product_comment.product.star_list.fifth | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
        {% endif %}

        </div>
        <div class="product-proportion-number">（{{product_comment.product.star_list.fifth}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{% if index <= 4 %} #F8AD6B {% else %} #bbbbbb {% endif %}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  product_comment.product.star_list.fourth %}
                  <div class="product-comment-total-progress" style="width:{{ product_comment.product.star_list.fourth | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number">（{{product_comment.product.star_list.fourth}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{% if index <= 3 %} #F8AD6B {% else %} #bbbbbb {% endif %}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  product_comment.product.star_list.third %}
           <div class="product-comment-total-progress" style="width:{{ product_comment.product.star_list.third | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number">（{{product_comment.product.star_list.third}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{% if index <= 2 %} #F8AD6B {% else %} #bbbbbb {% endif %}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
          {% if  product_comment.product.star_list.second %}
              <div class="product-comment-total-progress" style="width:{{ product_comment.product.star_list.second | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
          {% endif %}
        </div>
        <div class="product-proportion-number">（{{product_comment.product.star_list.second}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{% if index <= 1 %} #F8AD6B {% else %} #bbbbbb {% endif %}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
           {% if  product_comment.product.star_list.first %}
           <div class="product-comment-total-progress" style="width:{{ product_comment.product.star_list.first | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
           {% endif %}

        </div>
        <div class="product-proportion-number">（{{product_comment.product.star_list.first}}）</div>
      </div>
    </div>
  </div>

  <div class="comments_detail-comment-wrap">
    {% assign commentsLangth = product_comment.comments | size %}
    {% if commentsLangth %}
    <div id="comments_detail-warp"></div>
    {% else %}
		{% include empty ,{text:lang.comments.no_comments,icon:'comment'}%}
    {% endif %}
  </div>

  {% include pagination ,{ paginate : paginate } %}

  <div class="back-box">
    <a href="javascript:history.back();">
      <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
      <span>{{lang.general.back}}</span>
    </a>
  </div>
</div>

{% raw %}
<!-- 评论上传图片 -->
<script type="text/x-template" id="omesaas-comment-upload-temp">
  {% for img in  imgs  %}
  <div class="upload-picture-card">
    <div class="upload-picture-close">
      <svg t="1633762187025" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2316" width="14" height="14">
        <path
          d="M1001.648365 134.577728a30.999519 30.999519 0 0 0-27.529848-31.283918 208.237136 208.237136 0 0 0-36.573745-3.75407q-162.164456-0.398159-324.215152 0c-41.806691 0-42.318609 0-42.03421-41.294772a47.608436 47.608436 0 0 0-22.240022-48.632273A75.650202 75.650202 0 0 0 478.012454 8.645737a48.859792 48.859792 0 0 0-22.751941 56.197293c0.625678 4.664148-0.284399 9.555815 0.398159 14.219963 2.388954 16.153878-4.095349 20.931785-20.306107 20.874906-82.475784 0-164.951569 1.080717-247.370473 1.592636-41.636051 0-83.272102-0.341279-125.135673 0-21.841863 0.284399-39.417737 7.280621-40.214055 33.729751a37.370062 37.370062 0 0 0 37.370062 41.351652 112.622106 112.622106 0 0 0 31.227039 0.2844c22.751941-3.299031 30.203201 3.81095 29.861922 28.439925-1.478876 119.447688-0.682558 238.895376-0.682559 358.343064v355.61283a92.088479 92.088479 0 0 0 102.668132 104.147008q290.087242 0.682558 580.174483 0a91.7472 91.7472 0 0 0 102.383733-104.033248c0.341279-80.598749 0-161.197499 0-241.796248 0-157.443428 0.625678-314.829977-0.625679-472.102766 0-24.401456 6.598063-31.795837 29.748163-28.439926a80.37123 80.37123 0 0 0 44.650683-5.687985 35.606787 35.606787 0 0 0 22.240022-36.801264z m-252.3759 807.693889q-240.488011 0.853198-480.976023 1.933915c-52.898262 0-69.222779-16.438277-69.279659-69.791578V541.382425c0-112.906505 0.455039-225.81301-0.455039-338.719515 0-19.05475 3.469671-25.709693 24.344576-25.652813q290.087242 1.308237 580.686403 0c19.339149 0 22.751941 6.086144 22.75194 23.889538 0 221.091982 0.398159 442.183964 0.455039 663.219066 0.284399 60.349522-17.689634 77.640997-77.527237 77.868517z"
          fill="#ffffff" p-id="2317">
        </path>
        <path
          d="M440.699271 565.613241c0 78.380435 0.284399 156.76087 0 235.141306 0 34.127911-26.562891 52.784502-52.613862 38.678299a41.749811 41.749811 0 0 1-18.997871-42.603009V532.964207 337.013119c0-35.379268 11.887889-52.272583 36.403105-51.931304s35.208628 17.063955 35.208628 53.182661v227.348765z m229.112041-4.436628v253.115338c0 32.478395-15.585079 52.272583-39.815896 51.533146s-38.1095-19.566669-38.16638-50.395549v-509.074669c0-32.193996 13.480525-48.859792 38.28014-49.201071s39.531497 17.462114 39.815896 50.850587q-0.17064 126.614549-0.17064 253.172218z"
          fill="#ffffff" p-id="2318">
        </path>
      </svg>
    </div>
    <img src="{{img}}">
  </div>
  {% endfor  %}
</script>
<!-- 评论弹窗 -->
<script type="text/x-template" id="omesaas-popup-write-comment">
   
    <div class="moi-write-comment">
      <svg t="1633749174089" class="close popup-claer" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2174" width="12" height="12">
        <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="2175">
        </path>
      </svg>
      <div class="header">
        <img class="header-img" src="" alt="" />
        <div class="header-score">
          <svg t="1632626527998" class="score-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="#ddd" p-id="7122">
            </path>
          </svg>
          <svg t="1632626527998" class="score-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="#ddd" p-id="7122">
            </path>
          </svg>
          <svg t="1632626527998" class="score-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="#ddd" p-id="7122">
            </path>
          </svg>
          <svg t="1632626527998" class="score-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="#ddd" p-id="7122">
            </path>
          </svg>
          <svg t="1632626527998" class="score-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="#ddd" p-id="7122">
            </path>
          </svg>
        </div>
      </div>
      <div class="mo-form" id="comment-form">
        <div class="mo-form-item" name='customer_name'>
          <div class="mo-form-item-value">
            <input class="mo-form-input" type="text" value="{% if customerInfo.first_name %}{{customerInfo.first_name}} {{customerInfo.last_name}}{% endif %}" placeholder="{{lang.comments.your_name_here}}" />
          </div>
        </div>
        <div class="mo-form-item" name='customer_email'>
          <div class="mo-form-item-value">
            <input class="mo-form-input" type="text" value="{{customerInfo.email}}" placeholder="{{lang.comments.your_email_here}}" />
          </div>
        </div>
        <div class="mo-form-item" name='content'>
          <div class="mo-form-item-value">
            <textarea class="mo-form-textarea" value="" placeholder="{{lang.comments.your_experience_here}}" maxlength="2000"></textarea>
          </div>
        </div>
        <div class="mo-form-item">
          <div class="mo-form-item-value">
            <div class="upload" id="card-upload">
              <div id="card-upload-img" style="display: flex;flex-flow: wrap;"></div>
              <label class="upload-select-card">
                <input type="file" multiple accept="image/*"  id="file-upload" />
              </label>
            </div>
          </div>
        </div>
        <div class="mo-form-item" name='code'>
          <div class="mo-row">
            <div class="mo-col-8">
              <div class="mo-form-item-value">
                <input class="mo-form-input" type="text" placeholder="{{lang.comments.enter_here}}" />
              </div>
            </div>
            <div class="mo-col-4" style="padding-left: 20px">
              <img class="code-img" src="/code" onclick="this.src='/code?'+Math.random();" />
            </div>
          </div>
        </div>
        <div class="mo-form-item">
          <div class="mo-form-item-value">
            <a id='confirm' class="main_btn" style="width:100%">{{ lang.comments_detail.submit | upcase }}</a>
          </div>
        </div>
      </div>
    </div>
</script>
{% endraw %}
{% include comment %}

<script type="text/javascript">
(function () {
    window.customerInfo = {{ customerInfo | json}};
    var commentLayerHtml = $("#omesaas-popup-write-comment").html();
    const commentTemplate = $("#omesaas-comment-temp").html();
    const uploadTemplate = $("#omesaas-comment-upload-temp").html();
    var comment;

    //评论参数
    var params = {};
    var currentOption = {};
    var upSelectCard; //= comment.find(".upload-select-card");
    var uploadCard; //= comment.find("#card-upload");
    var scoreIconNode; // = comment.find(".score-icon");

    function writeComment(option) {
        const defaultOption = {
            product_id: "",
            star: "",
            content: "",
            customer_name: "",
            customer_email: "",
            images: {
                src: []
            },
            code: ""
        };

        $.extend(params, defaultOption, option);
        const popupLayer = moi.popup();
        engine.parseAndRender(commentLayerHtml, {
                customerInfo: customerInfo,
                lang: lang
            }).then(function (liquidHtml) {
                popupLayer.addContent(liquidHtml);
                comment = popupLayer.temp;
                upSelectCard = comment.find(".upload-select-card");
                uploadCard = comment.find("#card-upload");
                scoreIconNode = comment.find(".score-icon");
                //设置评论商品图片
                comment.find(".header-img").attr("src", option.img);
                currentOption = option;

                scoreIconNode.on("click", function () {
                    const index = $(this).index();
                    initScore(index);
                });
                initScore(4);
                initUpload();
                submit();
            });

        return {
            close: function () {
                popupLayer.close();
            }
        };
    }

    //设置评论分数
    function initScore(index) {
        params.star = index + 1;
        for (let i = 0; i < 5; i++) {
            if (i <= index) {
                scoreIconNode.eq(i).attr("class", "score-icon score-icon-active");
            } else {
                scoreIconNode.eq(i).attr("class", "score-icon");
            }
        }
    }

    //上传图片
    function uploadOSS(file, retData, callback) {
        //图片后缀
        var suffix = file.type.split("/").pop();
        //生成图片名称
        var fileName = new Date().getTime() + Math.floor(Math.random() * 10000000) + "." + suffix;
        var formData = new FormData();
        //文件路径
        var oss_bucket = retData.dir + fileName;
        // // 存储OSS需要的key
        formData.append("OSSAccessKeyId", retData.accessid || "");
        formData.append("policy", retData.policy || "");
        formData.append("signature", retData.signature || "");
        formData.append("name", fileName);
        formData.append("key", oss_bucket || "");
        formData.append("success_action_status", "200");
        formData.append("file", file);

        fetch(retData.host, {
            method: "POST",
            body: formData,
            mode: 'no-cors', // no-cors, *cors, same-origin
            cache: 'no-cache'
        }).then((result) => {
            callback && callback();
        }).then((result) => {
                const path = retData.host + "/" + oss_bucket;
                //追加图片
                params.images.src.push(path);
                engine.parseAndRender(uploadTemplate, {
                        imgs: params.images.src
                    }).then(function (liquidHtml) {
                        uploadCard.find("#card-upload-img").html($(liquidHtml));

                        if (params.images.src.length === 5) {
                            uploadCard.find(".upload-select-card").hide();
                        }
                    });
        }).catch((err)=>{
            callback && callback();
            alert("上传错误",err)
        });
    }
    //初始化上传图片
    function initUpload() {
        //图片选择
        comment.on("change", "#file-upload", function (e) {
            var e = e || window.event;
            var files = e.target.files;
            var total = files.length; // 上传文件长度
            if (params.images.src.length + files.length > 5) {
                comment.find("#file-upload").val("");
                return alert("最大上传5张");
            }
            var load = moi.nodeShowLoading(upSelectCard, "mo-loading-black");

            moi.ajax({
                url: `/upload_sign`,
                success(ret) {
                    var retData = ret.data;
                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        uploadOSS(file, retData, function () {
                            total = total - 1;
                            if (total === 0) {
                                comment.find("#file-upload").val("");
                                load.close();
                            }
                        });
                    }
                }
            });
        });
        //图片删除
        uploadCard.on("click", ".upload-picture-card", function () {
            var index = $(this).index();
            params.images.src.splice(index, 1);
            //移除元素
            engine.parseAndRender(uploadTemplate, {
                    imgs: params.images.src
                }).then(function (liquidHtml) {
                    uploadCard.find("#card-upload-img").html($(liquidHtml));

                    if (params.images.src.length < 5) {
                        uploadCard.find(".upload-select-card").show();
                    }
                });
        });
    }

    //提交
    function submit() {
        comment.find("#confirm").on("click", function () {
            const rules = {
                code: [{ required: true, message: lang.comments.ruleCode }],
                customer_email: [{ required: true, message: lang.comments.ruleEmail }],
                customer_name: [{ required: true, message: lang.comments.ruleName }],
                content: [{ required: true, message: lang.comments.ruleContent }]
            };
            var form = moi.form("#comment-form", rules);
            var formParams = moi.paramsValueString(form.allValue());
            if (form.allVerify()) {
                params.code = formParams.code;
                params.content = formParams.content;
                params.customer_email = formParams.customer_email;
                params.customer_name = formParams.customer_name;
                currentOption.submit && currentOption.submit.call(this, params);
            }
        });
    }
    window.oemsaasWriteComment = writeComment;
})();

</script>
<script type="text/javascript">

  (function(){
  var comment = {{product_comment.comments | json}};
  var product = {{product_comment.product | json}};
  if(document.referrer === "" ){
    $(".back-box").hide()
  }

  const waterfall = new waterfalls({
        id: "#comments_detail-warp",
        bottomDistance: 30,
        renderType: "liquid",
        renderComplete(node) {
          window.addLazyImages && addLazyImages(node.find("img[data-src]"));
          node.find('img').click(function () {
            const JqThis = $(this);
            const parentIndex = JqThis.data("parent");
            moi.pictureImages(comment[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
          })
        },
        resizeConfig: [
          { min: 0, max: 1023, rowGutter: '20px', columnsGutter: '20px', columns: 1 },
          { min: 1024, rowGutter: '30px', columnsGutter: '30px', columns: 2 }
        ],
        render(data, callback) {
          engine.parseAndRender($("#omesaas-comment-temp-block").html(), {
            comments: data.map((item) => {
              item.price = formatMoney(item.price, oemcart_currency);
              item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
              item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
              return item;
            }),
            data_from:'{{data_from}}',
            lang: lang,
            storeConfig: storeConfig
          }).then(function (liquidHtml) {
            const node = $(liquidHtml);
            callback && callback.call(this, node)
          });

        }
  })
    if(comment.length){
      waterfall.addStorage(comment)
    }

    $(".write-comment").click(function (params) {
        var comment = oemsaasWriteComment({
            product_id:product.id,
            img:product.src,
            submit(params) {
                const load = moi.nodeShowLoading(this);
                //提交数据
                moi.ajax({
                    url: "/comments",
                    type: 'post',
                    data: JSON.stringify(params),
                    complete: function () {
                        load.close();
                    },
                    success: function (data) {
                        if (!data.code) {
                            comment.close();
                            moi.message({
                                content:"{{lang.comments.comment_success}}",
                                onClose:function(){
                                  location.reload();
                                }
                            })
                            return
                        }
                        return moi.alert({
                            title: !data.code ? "{{lang.comments.comment_success}}" : data.msg
                        });
                    }
                });
            }
        });
    }) 
  })()
 
</script>